<template>
	<view v-if="red_list.length!==0">
		<!-- 遮罩层 -->
		<view class="zhezhao"></view>
		<!-- 关闭按钮 -->
		<image class="guanbi" v-if="is_down" @click="guanbi" src="https://wechat-pictures-1301970825.file.myqcloud.com/hongbao/guanbi.png"></image>

		<view>
			<view class="hongbao1" v-if="red_list[indexs].is_show1">
				<image v-if="red_list[indexs].avatar != ''" :src="red_list[indexs].avatar"></image>
				<!-- <image v-else src="../../static/image/icon_logo.png" mode=""></image> -->
				<!-- ../../static/image/icon_logo.png -->
				<view class="shop-name">{{ red_list[indexs].depName }}{{ red_list[indexs].shopOwnerName }}送您的红包</view>
				<view class="msg">请及时领取</view>
				<view class="msg2">{{ red_list[indexs].greeting }}</view>
				<view class="open-red" @click.stop="show(1)"></view>
			</view>

			<view class="hongbao2" v-if="red_list[indexs].is_show2">
			   <!-- <view class="title">{{time}}秒后自动关闭</view> -->
			   <view class="k-h">
				   <view class="price"><image src="https://wechat-pictures-1301970825.file.myqcloud.com/hongbao/jinbi.png"></image>{{ (red_list[indexs].fee/100).toFixed(2) }}</view>
				   <!-- <image class="user-img" src="../../common/wxParse/emojis/00.gif"></image> -->
				   <image class="user-img" v-if="red_list[indexs].avatar != ''" :src="red_list[indexs].avatar"></image>
				   <!-- <image class="user-img" v-else src="../../static/image/icon_logo.png" mode=""></image> -->
				   <view class="msg">领取成功,请到微信零钱查看!</view>
				   <view class="msg2">红包已直接存入微信余额</view>
				   <view class="open-red" @click.stop="show(2)"></view>
			   </view>
			</view>
		</view>

	</view>
</template>

<script>
		export default {
			name:"hongbao",
			data(){
				return{
					is_show1:true,
					is_show2:false,
					time:10,
					red_list:[],
					is_down:false,
					indexs:0,
				}
			},
			methods:{
				check_have_red() {
					var that=this;
					var data = {
						api_url: "/packetManage/batchRedToGet",
						api_method:'get',
						is_param_json:1,
						api_server:'packet',
					};
					this.$api.doRequest("post", 'api/transfer_api', data).then(res => {
					    if(res.data.code == 200) {
							if(res.data.data.length != 0){
								res.data.data[0].avatar = '';
								for(var i = 0; i < res.data.data.length; i++) {
									res.data.data[i].is_show1 = true;
									res.data.data[i].is_show2 = false;
								}
								this.red_list = res.data.data;
								this.$emit("is_open");
							}
					    }
					})
				},
				show(type){
					console.log(this.indexs)
					console.log(this.red_list)
					var that=this;

					if(type==1){
						this.lingqu();
						// that.red_list[that.indexs].is_show1 = false;
						// that.red_list[that.indexs].is_show2 = true;

						// if((that.indexs+1) == that.red_list.length) {
						// 	that.is_down = true;
						// }
					}else{
						if((that.indexs+1) == that.red_list.length) {
							that.$emit("no_hongbaos");
						}else {
							that.red_list[that.indexs].is_show2 = false;
						}
						that.indexs = that.indexs+1;
					}

				},
				// 领取红包
				lingqu() {
					console.log(this.red_list[this.indexs].id);
					var that=this;
					var data = {
						api_url: "/packet/payOneBatchRed",
						api_method:'get',
						is_param_json:1,
						api_server:'packet2',
						detailId:this.red_list[this.indexs].id,
					};
					this.$api.doRequest("post", 'api/transfer_api', data).then(res => {
					    if(res.data.code == 200) {
							uni.showToast({
								title:'领取成功!',
								icon:'none'
							})
							if((that.indexs+1) == that.red_list.length) {
								that.is_down = true;
							}
							setTimeout(function(){
								that.red_list[that.indexs].is_show1 = false;
								that.red_list[that.indexs].is_show2 = true;
							},500)
					    }
					})
				},

				guanbi(){
					this.$emit("no_hongbaos");
				}
			}
			}
</script>

<style>
.zhezhao {
	width: 100vw;
	height: 100vh;
	background-color: #000;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	display: flex;
	justify-content: center;
	align-items: center;
	opacity: 0.8;
}
.hongbao1{
	width: 580upx;
	height: 680upx;
	background-image: url(https://wechat-pictures-1301970825.file.myqcloud.com/hongbao/beijing1.png);
	background-size: 100% 100%;
	z-index: 11000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.open-red {
	width: 180upx;
	height: 180upx;
	position: absolute;
	left: 200upx;
	top: 400upx;
}
.hongbao1 image{
	width: 102upx;
	height: 102upx;
	border-radius: 10upx;
	border: 2upx solid #FEC770;
	position: absolute;
	top: 60upx;
	left: 50%;
	transform: translate(-50%,0%);
	}
	.hongbao1 .shop-name {
		width: 100%;
		color: #FFF4BD;
		font-size: 28upx;
		text-align: center;
		top: 200upx;
		position: absolute;
	}
	.hongbao1 .msg{
		font-size: 40upx;
		color: #FFF4BD;
		text-align: center;
		top: 280upx;
		position: absolute;
		width: 100%;
	}
	.hongbao1 .msg2{
		font-size: 22upx;
		color: #FFF4BD;
		text-align: center;
		bottom: 44upx;
		position: absolute;
		width: 100%;
	}
	.hongbao2{
	width: 544upx;
	height: 100%;
	z-index: 11000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	justify-content: center;
	flex-direction: column;
	}
	.hongbao2 .title{
		width: 100%;
		color: #FED396;
		font-size: 44upx;
		text-align: center;
		background: url(https://wechat-pictures-1301970825.file.myqcloud.com/hongbao/zhuangshi.png) no-repeat center;
		background-size: 100%;
		margin-bottom: 25upx;
	}
	.hongbao2 .k-h{
		width: 100%;
		height: 690upx;
		background: url(https://wechat-pictures-1301970825.file.myqcloud.com/hongbao/beijing.png) no-repeat center;
		background-size: 100%;
		position: relative;
	}
	.k-h .price{
		font-size: 80upx;
		color: #FF3C4D;
		width: 100%;
		text-align: center;
		position: absolute;
		top: 35upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.k-h .price image{
		width: 50upx;
		height: 50upx;
	}
	.k-h .msg2{
		font-size: 22upx;
		color: #FFF4BD;
		text-align: center;
		bottom: 44upx;
		position: absolute;
		width: 100%;
	}
	.k-h .user-img{
		width: 102upx;
		height: 102upx;
		border-radius: 10upx;
		border: 2upx solid #FEC770;
		position: absolute;
		top: 205upx;
		left: 50%;
		transform: translate(-50%,0%);
		}
		.k-h .msg{
			font-size: 22upx;
			color: #954300;
			text-align: center;
			top: 337upx;
			position: absolute;
			width: 100%;
		}
		.guanbi{
			position: fixed;
			top: 150upx;
			right: 60upx;
			width: 50upx;
			height: 50upx;
			z-index: 13000;
		}
</style>
